<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn-info {
            clear: both;
        }
        
        .user_search_text {
            display: inline-block;
            line-height: 32px;
            margin-left: 24px;
            width: 200px;
        }
        
        .btn-info {
            background-color: #2cb5ac;
        }
        
        .btn-link {
            color: #2cb5ac;
        }
        
        .table td span:hover {
            cursor: pointer;
        }
        
        #example_filter,
        .dataTables_info,
        .dataTables_length,
        .dataTables_paginate {
            display: none;
        }
    </style>
    <script>
        // var currenPage = 1;
        // var pageSize = 10;
        // //获取token
        // //var token=sessionStorage.getItem("token");
        // var baseUrl = 'http://112.124.20.68:7788/';
        // //1.请求所有用户角色-设置到搜索下拉框
        // $.ajax({
        //     url: baseUrl + "role/findAll",
        //     type: 'get',
        //     headers: {
        //         "Authorization": sessionStorage.getItem("token")
        //     },
        //     success: function(data) {
        //         console.log(data);
        //         data.data.forEach((item) => {
        //             $(".user_container .val").after(`<option>` + item.name + `</option>`);
        //         });
        //     },
        //     error: function(err) {
        //         console.log(err);
        //     }
        // });
        // //2.封装请求所有用户数据函数
        // function findAllByPage(currenPage, pageSize, username, rolename) {
        //     if (username != '') {
        //         url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize + '&username=' + username
        //     } else if (rolename != '请选择角色') {
        //         url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize + '&rolename=' + rolename
        //     } else if (username != '' && rolename != '请选择角色') {
        //         url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize + '&username=' + username + '&rolename=' + rolename
        //     } else {
        //         //均为空
        //         url = baseUrl + '/baseUser/pageQuery?page=' + currenPage + '&pageSize=' + pageSize
        //     };

        //     $.ajax({
        //         url: url,
        //         type: 'get',
        //         headers: {
        //             "Authorization": sessionStorage.getItem("token")
        //         },
        //         success: function(data) {
        //             //根据分页/搜索框查询出来的所有用户数据
        //             // console.log(data, '根据分页/搜索框查询出来的所有用户数据');
        //             console.log(data);
        //             data.data.list.forEach((item) => {
        //                 //插入到表格中
        //                 $('tbody').append($(`<tr>
        //                     <td>${item.id}</td>
        //      <td>${item.username}</td>
        //   <td>${item.realname}</td>
        //   <td>${item.roles.map(item => item.name).join(',')}</td>
        //   <td>${item.gender == "male" ? '男' : '女'}</td>
        //   <td>${item.status}</td>
        //   <td>${item.telephone}</td>
        //        <td>
        //        <span>设置</span>
        //        <span>移除</span>
        //        <span>详情</span>
        //        <span>修改</span> 
        //        </td>;
        //         </tr>`));
        //             });
        //         },
        //     });
        //     $.ajax({
        //         url: url,
        //         type: 'get',
        //         headers: {
        //             "Authorization": sessionStorage.getItem("token")
        //         },
        //         success: function(data) {
        //             //根据分页/搜索框查询出来的所有用户数据
        //             console.log(data, '根据分页/搜索框查询出来的所有用户数据');
        //             var num = Math.ceil(data.data.length / pageSize);
        //             for (var i = 0; i < num; i++) {
        //                 $('.num').after(`<li class="currentnum"><a href="#">` + i + 1 + `</a></li>`)
        //             }

        //         }
        //     });
        // };
        var currentPage = 1;
        var pageSize = 10;
        //获取token
        //var token=sessionStorage.getItem("token");
        var baseUrl = 'http://112.124.20.68:7788/';
        //通过promise封装请求函数
        function getData(type, url) {
            var p = new Promise((resolve, reject) => {
                //异步请求
                $.ajax({
                    url: url,
                    type: type,
                    headers: {
                        "Authorization": sessionStorage.getItem("token")
                    },
                    success: function(data) {
                        resolve(data);
                    }
                })
            });
            return p;
        }

        //1.请求角色信息
        getData("get", baseUrl + "role/findAll").then(function(data) {
            data.data.forEach((item) => {
                $(".user_container .val").after('<option>' + item.name + '</option>');
                $(".rolerole").after(` 
                <label class="checkbox-inline">
                        <input type="checkbox" name="role"  value="option">` + item.name + `
                        </label>`);
            });
        });

        //封装请求用户函数-处理数据
        function getUserData(url) {
            //2.请求所有用户-根据分页
            return getData("get", baseUrl + url).then(function(data) {
                //先清空所有分页按钮
                if ($(".clicknum").length > 0) {
                    $(".clicknum").remove();
                }
                //获取用户总量，设置分页
                var num = Math.ceil((data.data.total) / pageSize);
                for (var i = num; i > 0; i--) {
                    $(".user_container .num").after(`<li class="clicknum"><a href="#">` + i + `</a></li>`);
                }
                //给分页按钮绑定事件
                $(".clicknum").click(() => {
                    currentPage = $(event.target).text();
                    getUserData("baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize);
                });
                //清空所有tbody元素
                $(".user_container tbody").empty();
                //根据对象个数创建tr并追加
                data.data.list.forEach((item) => {
                    $(".user_container tbody").append(`<tr class="myclass">
				<td>` + item.id + `</td>
				<td>` + item.username + `</td>
				<td>` + item.realname + `</td>
				<td>` + item.politicsStatus + `</td>
				<td>` + item.gender + `</td>
				<td>` + item.status + `</td>
				<td>` + item.telephone + `</td>
				<td>
					<span data-toggle="modal" data-target=".szmd" >设置</span>
					<span class="deleteById">移除</span>
					<span class="details">详情</span>
					<span data-toggle="modal" data-target=".bs-example-modal-lg" class="changeUsers">修改</span>
				</td>
				</tr>`);
                });
                //2.获取table当前行数据
                var table = $('#example').DataTable();
                $('#example tbody').on('click', 'tr', function() {
                    var nTds = $('td', this);
                    var sday = $(nTds[1]).text();
                    var tday = $(nTds[2]).text();
                    var fday = $(nTds[3]).text();
                    var fiday = $(nTds[4]).text();
                    var siday = $(nTds[5]).text();
                    var seday = $(nTds[6]).text();
                    console.log(sday);
                    $(".usernameu").after(` 
                    <input type="email" style="width:200px;" class="form-control" id="inputEmail3" placeholder="用户名" readonly value=` + sday + `>`);
                    console.log(nTds.text());
                    $(".userN").after(` <input type="text" class="el-input__inner" autocomplete="off" style="margin-left: 30px;" value=` + sday + ` >`)
                    $(".realN").after(` <input type="text" class="el-input__inner" autocomplete="off" style="margin-left: 30px;"  value=` + tday + `>`)
                    $(".staT").after(` <input type="text" class="el-input__inner" autocomplete="off" style="margin-left: 30px;" value=` + siday + `>`)
                    $(".teleP").after(` <input type="text" class="el-input__inner" autocomplete="off" style="margin-left: 80px;" value=` + seday + `>`)
                });
                //给详情绑定事件
                $('.details').click(() => {
                    $(".content-main").load("./pages/user.html");
                });
                //给模态框的确定按钮绑定事件
                // $(".establish").click(() => {

                // });

                //给修改按钮绑定事件
                $(".changeUsers").click(() => {
                    $("#exampleModalLabel").text("修改用户信息");

                });
                //给删除按钮绑定事件
                $(".deleteById").click(() => {
                    var id = $(event.target).parent().parent().children().eq(0).text();
                    getData("get", baseUrl + "baseUser/deleteById?id=" + id).then(function(data) {
                        if (data.status == 200) {
                            alert(data.message);
                        }
                        //页面刷新
                        getUserData("baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize);
                    });
                });
            });
        }
        getUserData("baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize);
        //给搜索按钮绑定事件
        $(".user_search").click(() => {
            //1.获取用户输入
            var username = $(".user_search_text").eq(0).val();
            var rolename = $(".user_search_text").eq(1).val();
            if (username != '' && rolename == "请选择角色") {
                url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + "&username=" + username;
            } else if (username == "" && rolename != '请选择角色') {
                url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + "&rolename=" + rolename;
            } else if (username == '' && rolename == "请选择角色") {
                url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize;
            } else {
                url = "baseUser/pageQuery?page=" + currentPage + "&pageSize=" + pageSize + "&username=" + username + "&rolename=" + rolename;
            }
            //发送请求
            getUserData(url);
        });

        //给添加按钮添加事件
        $(".addUsers").click(() => {
            $("#exampleModalLabel").text("添加用户信息");
        })

        // 确定按钮保存或更新
        $('.dialog-footer button:last').click(() => {

        })
    </script>

</head>

<body>
    <div class="user_container">

        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <!-- 模态框 -->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">添加用户信息</h4>
                    </div>
                    <div class="modal-body">
                        <form class="el-form">
                            <div class="el-form-item is-required el-form-item--medium">
                                <label class="el-form-item__label userN" for="username" style="width:80px">用户名:</label>
                            </div>
                            <div class="el-form-item is-required el-form-item--medium">
                                <label class="el-form-item__label realN" for="realname" style="width:80px">姓名:</label>


                            </div>


                            <div class="el-form-item is-required el-form-item--medium">
                                <label class="el-form-item__label staT" for="statue" style="width:80px">状态:</label>

                            </div>

                            <div class="el-form-item is-required el-form-item--medium">
                                <label class="el-form-item__label genD" for="gender" style="width:80px">性别:</label>
                                <div class="el-radio-group" role="radiogroup" style="margin-left:80px;">
                                    <input type="radio" aria-hidden="true" tabindex="-1" value="male" name="genderradio">
                                    <label>男</label>
                                    <input type="radio" aria-hidden="true" tabindex="-1" value="female" name="genderradio">
                                    <label>女</label>
                                </div>
                            </div>
                            <div class="el-form-item is-required el-form-item--medium">
                                <label class="el-form-item__label teleP" for="telephone" style="width:80px">手机号:</label>

                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
        <!-- 模态框结束啦 -->
        <!-- 设置模态框 -->
        <div class="modal fade szmd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">设置角色</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label usernameu ">用户名</label>

                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label rolerole">角色</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 设置模态框结束 -->
        <div>
            <button type="button" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-info addUsers">添加</button>
            <input type="text" class="form-control user_search_text" placeholder="请输入用户名">
            <select class="form-control user_search_text">
            <option class="val">请选择角色</option>
          </select>
            <button type="button" class="btn btn-link user_search">搜索</button>
        </div>
        <div>
            <table class="table table-hover" id="example">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>角色</th>
                        <th>性别</th>
                        <th>状态</th>
                        <th>手机号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>username</td>
                        <td>name</td>
                        <td>role</td>
                        <td>femen</td>
                        <td>status</td>
                        <td>18777776666</td>
                        <td>
                            <span>设置</span>
                            <span>移除</span>
                            <span>详情</span>
                            <span>修改</span>
                        </td>
                    </tr>

                </tbody>
            </table>

        </div>
        <div class="row">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="num">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!-- <li><a href="#">1</a></li>
             <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li> -->
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>

</html>